<template>
	<view class="out">
		<input type="text" :value="iptValue" @focus="isActive=true" @blur="isActive=false"
		v-model="iptValue" @confirm="onConfirm"
		/>
		
		<image src="/static/chicken.gif" mode="" class="pic" :class="isActive?'active':''"></image>
	</view>
	
	<view class="">预览:{{iptValue}}</view>
</template>

<script setup>
import { ref } from 'vue';

const iptValue = ref("")
const isActive = ref(false)

function onConfirm(e){
	console.log(e);
}

</script>

<style lang="scss" scoped>
.out{
	padding: 0 20rpx;
	margin-top: 40rpx;
	// 设置相对定位
	position: relative;
	input{
		border: 1px solid #ccc;
		height: 40px;
		// 设置相对定位
		position: relative;
		background: #fff;
		
		// 设置对应的层级
		z-index: 2;
	}
	.pic{
		width: 24px;
		height: 24px;
		// 设置对应的层级
		z-index: 1;
		// 设置绝对定位
		position: absolute;
		top: 0px;
		left: calc(50% - 12px);
		transition: top 0.3s;
	}
	.pic.active{
		top:-24px;
	}
}


</style>
